<template>
  <div id="cart">
    <div class="containner px-20 py-20 box-shadow text-xl weight gray" v-if="cart.cart_list.length == 0">
      购物车成暂无任何记录
    </div>
    <!---->
    <div class="containner" v-if="cart.cart_list.length > 0">
      <div class="flex justify-between item-center text-md dark bg-gray px-20 py-5 cart-header">
        <div class="mx-5"><input type="checkbox" class="cart_cbx" :checked="cart.all_checked"></div>
        <div class="cart-product mx-5">商品</div>
        <div class="cart-param mx-5">单价</div>
        <div class="cart-param mx-5">数量</div>
        <div class="cart-param mx-5">小计</div>
        <div class="cart-param mx-5">操作</div>
      </div>
      <!-- 遍历购物车数据 -->
      <div v-for="cart in cart.cart_list" :key="cart.car_id"
        class="flex justify-between item-center text-md dark my-10 px-20 py-5 cart-body">
        <div class="mx-5"><input type="checkbox" :checked="cart.cart_checked == 1" class="cart_cbx"
            @change="checked_changed($event,cart)"></div>
        <div class="cart-product mx-5 flex item-start"><img :src="product.base_img_url+cart.cart_thumburl" width="80px"
            height="80px" class="rounded hand">
          <div class="cart-name mx-10 text-left flex-column justify-between item-start">
            <div class="hover-red hand ">{{cart.cart_name}}</div>
            <div class="cart-sku flex item-center" v-for="attr in JSON.parse(cart.cart_sku)" :key="attr.value_id">
              <div class="gray text-sm pr-5 hand hover-red"> {{attr.value_name}} </div>
            </div>
          </div>
        </div>
        <div class="cart-param mx-5">￥{{cart.cart_price}}</div>
        <div class="cart-param mx-5"><input type="number" min="1" class="cart-count" :value="cart.cart_count"
            @change="count_changed($event,cart)"></div>
        <div class="cart-param mx-5">￥{{cart.cart_price * cart.cart_count}}</div>
        <div class="cart-param mx-5 hover-red hand" @click="delete_cart(cart)">删除</div>
      </div>
      <div class="flex justify-between item-center mt-10">
        <div class="flex item-center">
          <div class="mx-5"><input type="checkbox" class="cart_cbx"></div>
          <div class="mx-5 gray hover-red hand text-sm">清空购物车</div>
        </div>
        <div class="flex item-center justify-end">
          <div class="mx-5 dark text-md"><span>总价：</span><span class="red text-xl weight">￥{{cart.total}}</span>
          </div><button class="btn-pay ml-10 hand" @click="pay_clicked()">去结算</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    mapActions,
    mapState
  } from 'vuex'

  export default {
    computed: {
      ...mapState(['cart', 'product'])
    },
    methods: {
      ...mapActions('cart', ['get_cart_list', 'update_cart', 'delete_cart']),
      //勾选
      checked_changed(e, cart) {
        this.update_cart({
          cart_count: cart.cart_count,
          cart_checked: e.target.checked ? 1 : 0,
          car_id: cart.car_id
        })
      },
      //购买数量
      count_changed(e, cart) {
        this.update_cart({
          cart_count: e.target.value,
          cart_checked: cart.cart_checked,
          car_id: cart.car_id
        })
      },
      //结算
      pay_clicked() {
        this.$router.push({
          path: '/account'
        })
      }
    },
    mounted() {
      this.get_cart_list();
    }
  }
</script>

<style scoped>
  @import '../assets/css/cart.css'
</style>
